<template>
  <div>
    <el-row type="flex" justify="space-between" class="card-row">
      <el-col :span="11" class="chart-card">
        <div class="cart-header roomChart">
					<slot name="chartT"/>
				</div>
        <div class="chart-title">
          <span class="title">Temperature</span>
        </div>
        <div class="chart-info">
          <span>room temperature display.</span>
          <el-divider class="line"/>
        </div>
        <div class="chart-footer">
					<div class="info-box-footer">
						<slot name="footer-time"/>
					</div>
					<div class="btn-box-footer">
						<slot name="footer"/>
					</div>
        </div>
      </el-col>

			<el-col :span="11" class="chart-card">
				<div class="cart-header roomChart">
					<slot name="chartH"/>
				</div>
				<div class="chart-title">
					<span class="title">Humidity</span>
				</div>
				<div class="chart-info">
					<span>room humidity display.</span>
					<el-divider class="line"/>
				</div>
				<div class="chart-footer">
					<div class="info-box-footer">
						<slot name="footer-time"/>
					</div>
					<div class="btn-box-footer">
						<slot name="footer"/>
					</div>
				</div>
			</el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'ChartCard',
    data() {
      return {

			}
    },
    methods: {
			setBgColor() {
			  let r = parseInt(Math.random() * 115 + 140, 10);
			  let g = parseInt(Math.random() * 65 + 190, 10);
			  let b = parseInt(Math.random() * 115 + 140, 10);
				let color1 = '#' +	r.toString(16) + g.toString(16) + b.toString(16);
				let color2 = '#' +	(r - 30).toString(16) + (g - 30).toString(16) + (b - 30).toString(16);
				return [color1, color2];
			}
    },
    mounted() {
      let Dom = document.querySelectorAll('.roomChart');
      for (let i = 0; i < Dom.length; i++) {
        let colors = this.setBgColor();
        Dom[i].style.background = `linear-gradient(60deg,${colors[0]},${colors[1]})`
      }
    }
  };
</script>

<style scoped>
  .card-row {
    margin-top: 45px;
  }
  .chart-card {
		background-color: #fff;
    border-radius: 3px;
		margin: 0 15px;
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  }
  .cart-header {
    border-radius: 3px;
		background: linear-gradient(60deg,#26c6da,#00acc1);
    width: calc(100% - 40px);
    margin: -20px auto 0;
    /*box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2);*/
  }
  .chart-title {
    display: block;
    color: rgba(0, 0, 0, .87);
    font-size: 20px;
    font-family: Roboto;
    padding: 15px 20px;
  }
  .chart-info {
    font-size: 14px;
    color: #999999;
    padding: 0 20px 15px;
  }
  .chart-footer {
    padding: 0 20px 15px;
    display: flex;
		justify-content: space-between;
    align-items: center;
    color: #999999;
    font-size: 12px;
  }
	.btn-box {
		float: right;
	}
  .line {
    margin: 20px 0 0;
  }
</style>
